<template>
    <div class="madp-back-btn" ref="backBtn">
        <img src="@/assets/img//back_btn.png" class="cursor-pointer" alt="" @click.stop="backFn" />
    </div>
</template>
<script>
    import mxInitWxConfig from '@/mixin/mxInitWxConfig.js';
    export default {
        components: {},
        mixins: [mxInitWxConfig],
        data() {
            return {
                showBtn: false,
                gapWidth: -10,
                left: 0,
                top: 0,
                itemWidth: 80, // 图标的宽度
                itemHeight: 80 // 图标的高度
            };
        },
        created() {
            this.showBtn = window.history.length > 1 ? true : false;
            this.clientWidth = document.documentElement.clientWidth;
            this.clientHeight = document.documentElement.clientHeight;
            this.left = this.clientWidth - this.itemWidth - this.gapWidth;
            this.top = this.clientHeight * 0.85;
        },
        mounted() {},
        methods: {
            backFn() {
                console.log('0000000000');
                if (this.showBtn) {
                    this.$router.back(-1);
                } else {
                    this.$router.push({
                        path: '/financialShop',
                        query: {
                            radar_type_code: '00',
                            radar_code: 'wes',
                            radar_name: '金融小店',
                            isSharePage: 1,
                            wxUserId: this.wxUserId,
                            wxExternalUserid: this.wxExternalUserid
                        }
                    });
                }
            },
            dragStart(e) {
                this.$refs.backBtn.style.transition = 'none';
            },
            dragEnd(e) {
                this.$refs.backBtn.style.transition = 'all 0.3s';
                if (this.left > this.clientWidth / 2) {
                    this.left = this.clientWidth - this.itemWidth - this.gapWidth;
                } else {
                    this.left = this.gapWidth;
                }
                if (this.top > this.clientHeight * 0.8) {
                    this.top = this.clientHeight * 0.8;
                }
                if (this.top < 0) {
                    this.top = 0;
                }
            },
            dragProgress(e) {
                if (e.targetTouches.length === 1) {
                    let touch = event.targetTouches[0];
                    console.log(touch.clientX, touch.clientY);
                    this.left = touch.clientX - this.itemWidth / 2;
                    this.top = touch.clientY - this.itemHeight / 2;
                }
            }
        }
    };
</script>
<style scoped lang="scss">
    .madp-back-btn {
        position: fixed;
        bottom: 50px;
        right: -12px;
        img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
        }
    }
</style>
